<template>
  <div class="reservation_content">
    <div class="reservation_content_top">
      <div class="reservation_content_top_left">
        <div class="show_reservation_date">{{ showStartDate }}~{{ showEndDate }}</div>
        <!-- <div class="show_reservation_change">
          <i class="el-icon-arrow-left show_reservation_change_icon"></i>
          <i class="el-icon-arrow-right show_reservation_change_icon"></i>
        </div> -->
      </div>
      <div style="margin-right: 120px;">
        <el-button style="position: relative; z-index: 10;" size="small" icon="el-icon-refresh"
          @click.stop="toRefreshData">刷新</el-button>
        <el-button style="position: relative; z-index: 10;" size="small"
          @click.stop="showSubscribeTime">关闭预约时间</el-button>
        <el-button type="primary" plain style="position: relative; z-index: 10;" size="small"
          @click.stop="toMakePlan">制定方案</el-button>
        <el-button type="primary" style="position: relative; z-index: 10;" size="small"
          @click.stop="toCreateOrder">创建预约单</el-button>
      </div>

      <!-- <div class="show_store_name">{{storeTitle}}</div> -->
    </div>
    <div class="board_plan" ref="boardPlan">
      <div class="board_plan_times" :style="{ height: `${52 + planBoxLine * 30}px`, left: `${timeStepLeft}px` }">
        <div class="board_plan_times_top" :style="{ top: `${timeStepTop}px` }"></div>
        <div class="board_plan_times_item" v-for="(item, index) in planStep" :key="index"
          :style="[timeStepLeft > 0 && { 'border-right': '1px solid #eee' }]">
          <template v-if="item.step.length > 0">
            <div class="plan_item_time">{{ item.time }}</div>
            <div class="plan_item_step_list">
              <div class="plan_item_step" v-for="(val, idx) in item.step" :key="idx">
                <div :class="['play_item_step_txt', hoverTimeStr == val.nameStr && 'play_item_step_txt_hover']">
                  {{ val.name }}</div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="board_plan_date" :style="{ height: `${52 + planBoxLine * 30}px` }">
        <div class="board_plan_date_item" v-for="(cItem, cIdx) in boardList" :key="cIdx"
          :style="{ width: `${cItem.repeatCount > 2 ? cItem.repeatCount * minWidth : cItem.repeatCount == 2 ? cItem.repeatCount * secondWidth : cardWidth}px` }">
          <div class="board_plan_date_top">
            <div class="board_plan_date_top_float"
              :style="{ top: `${timeStepTop}px`, backgroundColor: cIdx % 2 == 0 ? '#70AD47' : '#FFC000' }">
              {{ cItem.weekDay }}({{ cItem.monthDateStr }})</div>
          </div>
          <div class="board_plan_date_line" v-for="(item, index) in planStep" :key="index" @mouseleave="mouseleave">
            <div :class="['board_plan_date_line_item',
              hoverTimeStr == val.nameStr && 'board_plan_date_line_item_hover',
              hoverTimeStr == val.nameStr && hoverDate == cItem.date && 'board_plan_date_line_date_hover',
              toCheckTimeDisabled(cItem.disabledList, val.nameStr) && 'board_plan_date_line_date_disabled']"
              v-for="(val, idx) in item.step" :key="idx" @mouseenter="mouseenter(val.nameStr, cItem.date)"
              @click.stop="toOpenDisabledTime(cItem.disabledList, val.nameStr)"
              :style="[(index == 0 && idx == 0) && { height: '39px' }]">
              <span class="show_item_date" v-if="hoverTimeStr == val.nameStr && hoverDate == cItem.date">{{ cItem.weekDay
              }}({{ cItem.monthDateStr }})
                {{ val.nameStr }}</span>
              <template v-for="(v, i) in cItem.children">
                <div class="show_item_card" :key="i" v-if="v.time && v.time == val.nameStr && v.reservationInfo"
                  :style="[{ 'z-index': v.cIdx },
                  v.repeatTime ? { width: `${v.repeatCount == 2 ? secondWidth : minWidth}px`, left: `${v.repeatCount == 2 ? v.repeatIndex * secondWidth : v.repeatIndex * minWidth}px` } : { width: `${cardWidth}px` }]"
                  @click.stop="selectCard(cIdx, i)">
                  <div class="show_item_card_box" @click.stop="toJumpService(v.subscribeId)">
                    <div class="show_item_card_title"
                      :style="{ 'backgroundColor': v.serviceStatus == '1' ? '#FEC171' : (v.serviceStatus == '2' || v.serviceStatus == '3') ? '#30B08F' : v.serviceStatus == '100' ? '#E65D6E' : '#5da9ef' }">
                      <div class="show_item_card_title_txt">
                        {{ v.reservationInfo.staffName }}
                        <span v-if="v.technicianName">({{ v.technicianName }})</span>
                      </div>
                      <div class="show_item_card_title_time">
                        {{ v.time }}<span v-if="v.endDate">-{{ v.endDate }}</span>
                        <div class="show_item_card_tag" v-if="v.isFirst == '1'">初</div>
                      </div>
                    </div>
                    <div class="show_item_card_desc" :style="{
                      'backgroundColor': v.serviceStatus == '1' ? 'rgba(254,193,113, 0.3)' : (v.serviceStatus == '2' || v.serviceStatus == '3') ? 'rgba(48,176,143,0.3)' : v.serviceStatus == '100' ? 'rgba(230,93,110,0.5)' : 'rgba(93,169,239,0.3)',
                      'height': `${(v.needStep - 1) * 40}px`
                    }">
                      <span style="display: block" v-for="(t, n) in v.reservationInfo.detailVo" :key="n">
                        {{ t.serviceName }}
                        <template v-if="t.operationName || t.matchingName">
                          [ <span style="color: red;margin-right: 5px">{{ t.operationName }}</span>
                          <span style="color: orange">{{ t.matchingName }}</span> ]
                        </template>
                      </span>
                      <span class="show_item_card_desc_remark" v-if="v.reservationInfo.projectDesc"
                        :style="[(!v.reservationInfo.detailVo || !v.reservationInfo.detailVo.length || !v.reservationInfo.detailVo[0].serviceName) && { 'margin-top': 0 }]">
                        备注：{{ v.reservationInfo.projectDesc }}
                      </span>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="新增预约" :visible.sync="showDialog" width="500px" append-to-body @close="closeDialogBox">
      <el-form :model="refForm" :rules="refRule" label-width="110px" ref="refForm" size="small">
        <el-form-item label="客户搜索">
          <!-- <el-input placeholder="请输入手机号码或用户名称"
            v-model.trim="refForm.phone"
            @input="phoneInput"></el-input> -->
          <el-select v-model="customerSearch" ref="agentSelect" filterable remote reserve-keyword style="width: 100%"
            placeholder="请输入手机号码或用户名称" :remote-method="remoteMethod" :loading="selectLoading" @change="changeSelectPhone"
            @hook:mounted="cancalReadOnly" @visible-change="cancalReadOnly">
            <el-option v-for="item in phoneList" :key="item.customerUid" :label="`${item.phone} (${item.customerName})`"
              :value="item.customerUid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input label v-model="refForm.phone" readonly></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="cusotmerName">
          <el-input readonly v-model="refForm.cusotmerName"></el-input>
        </el-form-item>
        <el-form-item label="预约日期" prop="subscribeDate">
          <el-date-picker type="date" style="width: 100%" v-model="refForm.subscribeDate" value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预约开始时间" prop="startDate">
          <el-time-select :picker-options="{
            start: startWorkTime,
            step: `00:${stepTime}`,
            end: endWorkTimeStr,
            maxTime: refForm.endDate
          }" style="width: 100%" v-model="refForm.startDate" placeholder="选择时间">
          </el-time-select>
        </el-form-item>
        <el-form-item label="预约结束时间" prop="endDate">
          <el-time-select :picker-options="{
            start: startWorkTime,
            step: `00:${stepTime}`,
            end: endWorkTimeStr,
            minTime: refForm.startDate
          }" style="width: 100%" v-model="refForm.endDate" placeholder="选择时间">
          </el-time-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model.trim="refForm.remark" :rows="3" placeholder="请输入内容">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialogBox">关闭</el-button>
        <el-button @click="toSubmitSave" type="primary">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="关闭预约时间" :visible.sync="subscribeTimeShow" width="600px" append-to-body
      @close="closeDialogSubscribeTimeBox">
      <el-form label-width="92px" size="small">
        <el-form-item label="预约日期">
          <el-date-picker v-model="subscribeTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" :picker-options="expireTimeOPtion" @change="changeSubscribeTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预约时间段">
          <el-checkbox-group v-model="selectTimeList" size="mini">
            <el-checkbox style="margin-left: 0" v-for="(item, idx) in subscribeTimeList" :key="idx"
              :label="`${item.time}-${item.endTime}`" border></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialogSubscribeTimeBox">关闭</el-button>
        <el-button @click="toSubmitSaveSubscribeTime" type="primary">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  workInfo,
  createOrder,
  phoneGetInfo,
  workTime,
  getStorePlanTime,
  closeStorePlan,
  openStorePlan
} from "@/api/service/workbench";
import {
  phoneGetUser,
} from "@/api/service/makePlan";
import { mapGetters } from 'vuex'

export default {
  data () {
    var validatephone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (value.length !== 11) {
        callback(new Error("手机号码格式不正确"));
      } else {
        callback();
      }
    };

    return {
      startWorkTime: '08:00',
      endWorkTime: '22:00',
      stepTime: 15,
      boardList: [],
      planStep: [],
      countPlanBoxW: 0,
      hoverTimeStr: null,
      hoverDate: '',
      cardWidth: 200,
      secondWidth: 160,
      minWidth: 140,
      floatIdx: 0,
      timeStepLeft: 0,
      timeStepTop: 0,
      showDialog: false,
      selectLoading: false,
      phoneList: [],
      customerSearch: '',
      refForm: {
        phone: '',
        customerId: '',
        cusotmerName: '',
        subscribeDate: '',
        startDate: '',
        endDate: '',
        remark: '',
      },
      refRule: {
        phone: [
          { required: true, message: '请搜索填入手机号码', trigger: 'blur' },
        ],
        cusotmerName: [
          { required: true, message: '请搜索填入用户姓名', trigger: 'blur' },
        ],
        subscribeDate: [
          { required: true, message: '请选择预约日期', trigger: 'change' }
        ],
        startDate: [
          { required: true, message: '请选择预约开始时间', trigger: 'change' }
        ],
        endDate: [
          { required: true, message: '请选择预约结束时间', trigger: 'change' }
        ]
      },
      refreshTimes: '',
      subscribeTime: '',
      subscribeTimeShow: false,
      selectTimeList: [],
      subscribeTimeList: [],
      expireTimeOPtion: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7 //如果没有后面的-8.64e7就是不可以选择今天的
        },
      },
    }
  },
  props: {
    storeId: {
      type: [String, Number]
    },
    selectDate: {
      type: Array,
      default: function () {
        return []
      }
    },
    dataStatus: {
      type: Array,
      default: function () {
        return []
      }
    },
    storeTitle: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    showStartDate () {
      if (this.selectDate.length > 0) {
        let days = this.selectDate[0].date.split('-').splice('1')
        return `${days[0]}月${days[1]}日`
      }
      return '--'
    },
    showEndDate () {
      if (this.selectDate.length > 0) {
        let days = this.selectDate[this.selectDate.length - 1].date.split('-').splice('1')
        return `${days[0]}月${days[1]}日`
      }
      return '--'
    },
    planBoxLine () {
      let h = 0
      this.planStep.forEach(item => {
        h += item.step.length
      })
      return h
    },
    endWorkTimeStr () {
      if (this.endWorkTime) {
        let timeArr = this.endWorkTime.split(':')
        let a = timeArr[0], b = timeArr[1]
        let endAllTime = (a * 60 * 60 + b * 60 - this.stepTime * 60) / 60

        return `${parseInt(endAllTime / 60)}: ${endAllTime % 60}`
      }
      return ''
    }
  },
  watch: {
    selectDate (val) {
      this.getData()
      this.intervalData()
    },
    dataStatus () {
      this.getData()
      this.intervalData()
    },
    storeId () {
      this.getInitData()
    }
  },
  created () {
    this.getInitData()

    this.subscribeTime = new Date().format('yyyy-MM-dd')

  },
  activated () {
    this.timeStepLeft = 0
    this.timeStepTop = 0
    setTimeout(() => {
      this.intervalData()
    })
  },
  deactivated () {
    clearInterval(this.refreshTimes)
  },
  mounted () {
    let str = `${this.endWorkTime.split(':')[0]}${this.endWorkTime.split(':')[1]}`
    str = str.substring(0, 3)
    this.floatIdx = parseFloat(str)
    this.$nextTick(() => {
      this.$refs.boardPlan.addEventListener('scroll', this.boardPlanScroll, true)
    })
  },
  beforeDestroy () {
    this.$refs.boardPlan.removeEventListener('scroll', this.boardPlanScroll)
  },
  methods: {
    cancalReadOnly (onOff) {
      this.$nextTick(() => {
        if (!onOff) {
          const Selects = this.$refs
          if (Selects.agentSelect) {
            const input = Selects.agentSelect.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }
        }
      })
    },
    remoteMethod (query) {
      if (query !== '') {
        this.selectLoading = true;
        setTimeout(() => {
          phoneGetUser({ name: query })
            .then(res => {
              this.selectLoading = false;
              this.phoneList = res.data
            })
            .catch(() => { })
        }, 200);
      } else {
        // this.options = [];
      }
    },
    toRefreshData () {
      this.getInitData()
      this.$emit('toRefreshData')
    },
    closeDialogSubscribeTimeBox () {
      this.selectTimeList = []
      this.subscribeTimeShow = false
    },
    toSubmitSaveSubscribeTime () {
      this.$confirm('确认禁用所选时间段?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let arr = []
        this.selectTimeList.forEach(item => {
          arr.push({
            workDate: this.subscribeTime,
            startTimeStr: item.split('-')[0],
            endTimeStr: item.split('-')[1],
          })
        })
        let res = await closeStorePlan(this.storeId, arr)
        if (res) {
          this.msgSuccess('操作成功')
          this.getData()
          this.intervalData()
          this.closeDialogSubscribeTimeBox()
        }
      })
    },
    async showSubscribeTime () {
      await this.getSubscribeTimeList()
      this.subscribeTimeShow = true
    },
    changeSubscribeTime () {
      this.selectTimeList = []
      this.getSubscribeTimeList()
    },
    async getSubscribeTimeList () {
      let res = await getStorePlanTime({
        storeId: this.storeId,
        workDate: this.subscribeTime
      })
      if (res) {
        this.subscribeTimeList = res.data
      }
    },
    toOpenDisabledTime (disabledList, timeStr) {
      if (disabledList && disabledList.length > 0) {
        let openData = null
        disabledList.forEach(item => {
          if (item.startTime == timeStr) {
            openData = item
          }
        })

        if (openData) {
          this.$confirm('确认开启所选时间段?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            let res = await openStorePlan(this.storeId, {
              endTime: `${openData.endTime}:00`,
              startTime: `${openData.startTime}:00`,
              workDate: openData.workDate
            })
            if (res) {
              this.msgSuccess('操作成功')
              this.getData()
              this.intervalData()
            }
          })
        }
      }
    },
    toCheckTimeDisabled (disabledList, timeStr) {
      if (disabledList && disabledList.length > 0) {
        let isDisabled = false
        disabledList.forEach(item => {
          if (item.startTime == timeStr) {
            isDisabled = true
          }
        })
        return isDisabled
      } else {
        return false
      }
    },
    async getInitData () {
      if (!this.storeId) return

      let res = await workTime({
        storeId: this.storeId
      })
      if (res) {
        let { data } = res
        this.startWorkTime = data.startTime
        this.endWorkTime = data.endTime
        this.stepTime = data.intervalMinute
        this.initWorkTime()
        this.getData()
        this.intervalData()
      }
    },
    intervalData () {
      clearInterval(this.refreshTimes)
      this.refreshTimes = setInterval(() => {
        this.getData()
      }, 1 * 60 * 1000)
    },
    // 制定方案
    toMakePlan () {
      this.$router.push({
        // path: '/store/memberList/newCustomer',
        path: '/store/customerList/newCustomer',
        query: { type: 'work', storeId: this.storeId }
      })
    },
    // 确认方案
    toJumpService (subscribeId) {
      this.$router.push({
        path: '/store/workbench/serviceOpt',
        query: {
          subscribeId,
          storeId: this.storeId,
          stepTime: this.stepTime,
          startWorkTime: this.startWorkTime,
          endWorkTime: this.endWorkTime,
        }
      })
    },
    phoneInput (value) {
      if (value === "") {
        return
      } else if (value.length !== 11) {
        return
      } else {
        phoneGetInfo({
          phone: value
        }).then(res => {
          let { data } = res
          this.refForm.customerId = data.customerUid
          this.refForm.cusotmerName = data.customerName
        })
      }
    },
    async changeSelectPhone (uid) {
      this.phoneList.forEach(item => {
        if (item.customerUid == uid) {
          this.refForm.customerId = item.customerUid
          this.refForm.cusotmerName = item.customerName
          this.refForm.phone = item.phone
        }
      })
    },
    toSubmitSave () {
      this.$refs['refForm'].validate(valid => {
        if (valid) {
          this.submitSave()
        } else {
          return false
        }
      })
    },
    submitSave () {
      this.$confirm('确认创建预约单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        createOrder({
          customerId: this.refForm.customerId,
          subscribeDate: this.refForm.subscribeDate,
          startDate: `${this.refForm.subscribeDate} ${this.refForm.startDate}:00`,
          endDate: `${this.refForm.subscribeDate} ${this.refForm.endDate}:00`,
          remark: this.refForm.remark,
          storeId: this.storeId
        }).then(res => {
          this.msgSuccess('创建成功')
          this.closeDialogBox()
          this.getData()
          this.intervalData()
        })
      }).catch(() => {

      });
    },
    closeDialogBox () {
      this.showDialog = false
      this.$refs['refForm'].resetFields();
      this.customerSearch = ''
      this.refForm.customerId = ''
      this.refForm.cusotmerName = ''
      this.refForm.remark = ''
    },
    // 创建预约单
    toCreateOrder () {
      this.showDialog = true
    },
    boardPlanScroll (e) {
      this.timeStepLeft = this.$refs.boardPlan.scrollLeft
      this.timeStepTop = this.$refs.boardPlan.scrollTop
    },
    async getData () {
      let arr = []
      this.dataStatus.forEach(item => {
        if (item == '3') {
          arr.push('2')
        }
        arr.push(item)
      })
      let res = await workInfo({
        startDate: this.selectDate[0].date,
        endDate: this.selectDate[this.selectDate.length - 1].date,
        storeId: this.storeId,
        dataStatus: arr
      })
      if (res) {
        let { data, closeDate } = res
        let dateList = JSON.parse(JSON.stringify(this.selectDate))
        let list = []
        let curDate = new Date().format('yyyy-MM-dd'), stepTimeStr = this.stepTime * 60 * 1000
        dateList.forEach(item => {
          let days = item.date.split('-').splice('1')
          item.monthDateStr = `${days[0]}/${days[1]}`

          closeDate.forEach(val => {
            if (item.date == val.workDate) {
              if (!item.disabledList) item.disabledList = []

              let startT = val.startTime.split(':'), endT = val.endTime.split(':')
              item.disabledList.push({
                startTime: `${startT[0]}:${startT[1]}`,
                endTime: `${endT[0]}:${endT[1]}`,
                workDate: val.workDate
              })
            } else {
              item.disabledList = []
            }
          })

          data.forEach(val => {
            if (val.children) {
              val.children.forEach(v => {
                if (v.reservationInfo && v.reservationInfo.serviceName) {
                  v.reservationInfo.serviceNameArr = v.reservationInfo.serviceName.split(',')
                }
              })
            }

            if (item.date == val.date) {
              let repeatCount = 1, repeatTime = '', repeatIndex = 0
              val.children.forEach(cVal => {
                let valTimeStr = ''
                if (cVal.endDate) {
                  valTimeStr = new Date(`${curDate} ${cVal.endDate}`) - new Date(`${curDate} ${cVal.time}`)
                }
                if (valTimeStr) {
                  cVal.needStep = Math.ceil(valTimeStr / stepTimeStr)
                } else {
                  cVal.needStep = 2
                }

                let str = `${cVal.time.split(':')[0]}${cVal.time.split(':')[1]}`
                str = str.substring(0, 3)
                cVal.cIdx = parseFloat(str)
                let repeat = val.children.filter(v => v.time == cVal.time)
                if (repeat.length > 1) {
                  if (repeatTime == cVal.time) {
                    repeatIndex++
                  } else {
                    repeatIndex = 0
                  }
                  cVal.repeatTime = cVal.time
                  cVal.repeatCount = repeat.length
                  cVal.repeatIndex = repeatIndex
                  repeatTime = cVal.time
                  repeatCount = repeat.length
                } else {
                  cVal.repeatTime = ''
                  cVal.repeatCount = ''
                  cVal.repeatIndex = ''
                }
              })
              item.repeatCount = repeatCount
              item = {
                ...item,
                ...val
              }
            }
          })
          list.push(item)
        })
        this.boardList = list
      }

    },
    initWorkTime () {
      let startT = parseFloat(this.startWorkTime.split(':')[0]), startTimes = parseFloat(this.startWorkTime.split(':')[1])
      let endT = parseFloat(this.endWorkTime.split(':')[0]), endTimes = parseFloat(this.endWorkTime.split(':')[1])
      let curDate = new Date().format('yyyy-MM-dd')
      let h = 60, curTime = new Date(`${curDate} 00:00:00`).getTime()
      let list = []
      let sTimes = curTime + startT * 60 * 60 * 1000 + startTimes * 60 * 1000, eTimes = curTime + endT * 60 * 60 * 1000 + endTimes * 60 * 1000
      for (let iTimes = sTimes; iTimes < eTimes; iTimes += this.stepTime * 60 * 1000) {

        let a = new Date(iTimes).getHours(), b = new Date(iTimes).getMinutes()
        if (a < 10) a = '0' + a
        if (b < 10) b = '0' + b

        list.push({
          hourName: a + '',
          name: b,
          nameStr: `${a}:${b}`
        })
        // if (parseFloat(i) == startT) {
        //   let t = parseInt(h / this.stepTime), a = 0
        //   for (let b = 0; b < t; b++) {
        //     a = b * this.stepTime + ''
        //     if (a <= startTimes) {
        //       a = startTimes + ''
        //     }
        //     if (a < 10) a = '0' + a
        //     step.push({
        //       name: a,
        //       nameStr: `${i}:${a}`
        //     })
        //   }
        //   let obj = {};
        //   step = step.reduce(function (item, next) {
        //     obj[next.nameStr] ? '' : obj[next.nameStr] = true && item.push(next);
        //     return item;
        //   }, []);
        // } else if (parseFloat(i) == endT) {
        //   let t = parseInt(endTimes / this.stepTime), a = 0
        //   for (let b = 0; b < t; b++) {
        //     a = b * this.stepTime + ''
        //     if (a < 10) a = '0' + a
        //     step.push({
        //       name: a,
        //       nameStr: `${i}:${a}`
        //     })
        //   }
        // } else {
        //   let t = parseInt(h / this.stepTime), a = 0
        //   for (let b = 0; b < t; b++) {
        //     a = b * this.stepTime + ''
        //     if (a < 10) a = '0' + a
        //     step.push({
        //       name: a,
        //       nameStr: `${i}:${a}`
        //     })
        //   }
        // }
        // list.push({
        //   time: i,
        //   step
        // })
      }
      let planObj = {}, planStep = []
      list.forEach(item => {
        if (!planObj[item.hourName]) {
          planObj[item.hourName] = {
            time: item.hourName,
            step: [{
              name: item.name,
              nameStr: item.nameStr
            }]
          }
        } else {
          planObj[item.hourName].step.push({
            name: item.name,
            nameStr: item.nameStr
          })
        }
      })
      let keysList = Object.keys(planObj).sort()
      keysList.forEach(item => {
        planStep.push(planObj[item])
      })
      this.planStep = planStep
    },
    mouseenter (str, date) {
      this.hoverTimeStr = str
      this.hoverDate = date
    },
    mouseleave () {
      this.hoverTimeStr = null
      this.hoverDate = ''
    },
    selectCard (index, idx) {
      // if (this.boardList[index].children) {
      //   this.boardList[index].children[idx].cIdx = this.floatIdx
      //   this.floatIdx++
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.reservation_content {
  flex: 1;
  overflow: hidden;
  height: 100%;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #eee;

  .reservation_content_top {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 0 20px;
    position: relative;

    .reservation_content_top_left {
      display: flex;
      align-items: center;
    }

    .show_reservation_date {
      font-size: 14px;
      color: #333;
      margin-right: 10px;
      position: relative;
      z-index: 10;
    }

    .show_reservation_change {
      position: relative;
      z-index: 10;
      display: flex;
      font-size: 24px;
      color: #333;

      .show_reservation_change_icon {
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .show_store_name {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 42px;
      font-size: 20px;
      color: #333;
    }
  }

  .board_plan {
    flex: 1;
    overflow: auto;
    padding-left: 78px;
    position: relative;
  }

  .board_plan_times {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1020;
    background-color: #fff;
    padding-top: 40px;
    width: 78px;

    .board_plan_times_top {
      position: absolute;
      top: 0;
      left: 0;
      width: 78px;
      height: 41px;
      z-index: 1;
      background-color: #fff;
      border-bottom: 1px solid #eee;
    }

    .board_plan_times_item {
      display: flex;
      background-color: #fff;

      &:not(:first-child) {
        .plan_item_time {
          border-top: none;
        }
      }

      .plan_item_time {
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #333;
        border: 1px solid #eee;
        border-left: none;
      }

      &:first-child {
        border-top: 1px solid #eee;

        .plan_item_time {
          border-top: none;
        }
      }

      .plan_item_step_list {
        .plan_item_step {
          height: 40px;
          border-bottom: 1px solid #eee;

          .play_item_step_txt {
            width: 36px;
            height: 100%;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #333;
          }

          .play_item_step_txt_hover {
            background-color: rgba(93, 169, 239, 0.15);
          }
        }
      }
    }
  }

  .board_plan_date {
    position: relative;
    width: 100%;
    white-space: nowrap;

    .board_plan_date_item {
      display: inline-block;
      height: 100%;

      .board_plan_date_top {
        height: 41px;
        line-height: 50px;
        text-align: center;
        font-size: 14px;
        color: #333;
        position: relative;

        .board_plan_date_top_float {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1010;
          width: 100%;
          height: 100%;
          line-height: 20px;
          text-align: center;
          border-bottom: 1px solid #eee;
          padding: 10px;
          background-color: #fff;
        }
      }

      .board_plan_date_line {
        width: 100%;

        .board_plan_date_line_item {
          width: 100%;
          height: 40px;
          position: relative;
          border-left: 1px solid #eee;
          border-bottom: 1px solid #eee;
        }

        .show_item_card {
          position: absolute;
          top: 0;
          left: 0;
          padding: 0 4px;
          min-height: 120px;

          &:hover {
            z-index: 999 !important;
          }

          .show_item_card_box {
            width: 100%;
            height: 100%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            background-color: #fff;
          }

          .show_item_card_title {
            height: 40px;
            width: 100%;

            .show_item_card_title_txt {
              height: 20px;
              text-align: center;
              line-height: 20px;
              font-size: 12px;
              color: #fff;
              padding: 0 5px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .show_item_card_title_time {
              text-align: center;
              line-height: 20px;
              font-size: 12px;
              color: #fff;
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: center;

              .show_item_card_tag {
                display: inline-block;
                background-color: orange;
                padding: 2px;
                border-radius: 1px;
                margin-left: 10px;
                line-height: 1;
              }
            }
          }

          .show_item_card_desc {
            width: 100%;
            padding: 6px 10px;
            font-size: 12px;
            min-height: 40px;
            color: #333;
            white-space: normal;
            word-break: break-all;
            line-height: 20px;
            overflow-y: auto;

            .show_item_card_desc_remark {
              display: block;
              color: #999;
              padding-top: 5px;
              margin-top: 5px;
            }
          }
        }

        .show_item_date {
          display: none;
          width: 100%;
          text-align: center;
          line-height: 38px;
          font-size: 12px;
          color: #999;
          position: absolute;
          top: 0;
          left: 0;
          height: 40px;
        }

        .board_plan_date_line_item_hover {
          background-color: rgba(93, 169, 239, 0.15);
        }

        .board_plan_date_line_date_hover {
          .show_item_date {
            display: inline-block;
          }
        }

        .board_plan_date_line_date_disabled {
          background-color: #eee;

          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>